<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('user', ['isCollapse'])
  },
  mounted() {
    // 媒体查询左侧菜单变化
    window.onresize = this.handleChangeWindowSize
  },
  methods: {
    ...mapActions('user', ['handleMenuChange']),
    handleChangeWindowSize() {
      if (document.body.clientWidth < 700) {
        if (this.isCollapse) return
        this.handleMenuChange()
      } else {
        if (!this.isCollapse) return
        this.handleMenuChange()
      }
    },
    sendMessage() {
      this.$store.state.permission.websock.send('Hello server!')
    }
  },
  beforeDestroy() {
    window.removeResizeAction = this.handleChangeWindowSize
  }
}
</script>
